import 'package:convex_bottom_bar/convex_bottom_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'package:get/get_rx/src/rx_types/rx_types.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:get/get_state_manager/src/simple/get_controllers.dart';

import 'home_page.dart';
import 'discovery_page.dart';
import 'add_page.dart';
import 'message_page.dart';
import 'profile_page.dart';

class BottomNavigationBarPage extends StatelessWidget {
  //全局状态控制器
  final globalStateController = Get.put(GlobalStateController());
  var mainState = Get.find<GlobalStateController>().state;

  List<Widget> bodyPageList = [
    HomePage(),
    DiscoveryPage(),
    AddPage(),
    MessagePage(),
    ProfilePage(),
  ];

  BottomNavigationBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
          preferredSize: const Size.fromHeight(0),
          child: AppBar(
            systemOverlayStyle: const SystemUiOverlayStyle(statusBarColor: Colors.blueAccent, systemNavigationBarContrastEnforced: true),
            backgroundColor: Colors.blueAccent,
            elevation: 0,
          )),
      body: SafeArea(
        top: true,
        bottom: true,
        child: Obx(() => bodyPageList[mainState.bottomBarIndex.value]),
      ),
      //底部导航条
      bottomNavigationBar: Obx(
        () => ConvexAppBar(
          onTap: (int index) {
            globalStateController.changeBottomBarIndex(index);
          },
          style: TabStyle.reactCircle,
          items: <TabItem>[
            TabItem(icon: Icon(Icons.home, color: mainState.bottomBarIndex.value == 0 ? Colors.redAccent : Colors.white), title: 'Home'),
            TabItem(icon: Icon(Icons.map, color: mainState.bottomBarIndex.value == 1 ? Colors.redAccent : Colors.white), title: "Discovery"),
            TabItem(icon: Icon(Icons.add, color: mainState.bottomBarIndex.value == 2 ? Colors.redAccent : Colors.white), title: "Add"),
            TabItem(icon: Icon(Icons.message, color: mainState.bottomBarIndex.value == 3 ? Colors.redAccent : Colors.white), title: "Message"),
            TabItem(icon: Icon(Icons.people, color: mainState.bottomBarIndex.value == 4 ? Colors.redAccent : Colors.white), title: "Profile"),
          ],
          initialActiveIndex: mainState.bottomBarIndex.value,
        ),
      ),
    );
  }
}

class MainState {
  //底部导航栏索引
  RxInt bottomBarIndex = 2.obs;
}

//全局状态控制器
class GlobalStateController extends GetxController {
  MainState state = MainState();
  //改变底部导航栏索引
  changeBottomBarIndex(int index) {
    state.bottomBarIndex.value = index;
  }
}
